<script setup>
import axios from '../utils/axios'
import { reactive, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { it } from 'element-plus/es/locales.mjs';
import { SortUp } from '@element-plus/icons-vue';
const data = reactive({
    page: 1, //当前页码
    limit: 5, //每页数量
    total: 0, //总记录数
    tableData: [], //分页的表格数据
    showAddDialog:false,//控制显示与隐藏
    showEditDialog:false,
})

const tableRef = ref();
//增加表单的数据
const addForm = ref({
    title:'',
    content:'',
    author:''
})

const editForm = ref({
    nid:'',
    title:'',
    content:'',
    author:''
})

const init = () => {
    axios.get("/news/page", {
        params: {
            page: data.page,
            limit: data.limit
        }
    })//正确响应后的回调函数，响应内容封装到res变量中
        .then(res => {
            console.log(res);
            //把数据赋值给tableData
            data.tableData = res.records;
            data.total = res.total;
        })
}

//分页跳转函数，pg是跳转的页码
const changePage = (pg) => {
    data.page = pg;
    init();
}

const del=(nid)=>{
    axios.get("/news/del?nid="+nid).then(res=>{
        if(res==0){
            ElMessage({
                showClose:true,//是否显示关闭按钮
                message:"删除成功!",//消息窗口中的样式类型
                type:"success",//消息窗口中的样式类型
                duration:2000,//消息窗口关闭后的回调函数
                onClose:()=>{
                    location.reload();//刷新本页面
                }
            })
        }
    })
}

const doAdd=()=>{
    axios.post("/news/doAdd",addForm.value).then(res=>{
        if(res==0){
            ElMessage({
                showClose:true,//是否显示关闭按钮
                message:"增加成功!",//消息窗口中的样式类型
                type:"success",//消息窗口中的样式类型
                duration:2000,//消息窗口关闭后的回调函数
                onClose:()=>{
                    data.showAddDialog=false;//关闭对话框
                    addForm.value={
                        title:'',
                        content:3600
                    }
                    init();//刷新本页面
                }
            })
        }
    })
}

const edit=(news)=>{
    console.log("你好");
    data.showEditDialog=true;
    editForm.value.nid=news.nid;
    editForm.value.title=news.title;
    editForm.value.content=news.content;
    editForm.value.author=news.author;
}

const doEdit=()=>{
    axios.post("/news/doEdit",editForm.value).then(res=>{
        if(res==0){
            ElMessage({
                showClose:true,//是否显示关闭按钮
                message:"修改成功!",//消息窗口中的样式类型
                type:"success",//消息窗口中的样式类型
                duration:2000,//消息窗口关闭后的回调函数
                onClose:()=>{
                    data.showEditDialog=false;//关闭对话框
                    editForm.value={
                        nid:'',
                        title:'',
                        content:3600
                    }
                    init();//刷新本页面
                }
            })
        }
    })
}

const getChecked = () => {
    const selectAry = tableRef.value.getSelectionRows();
    let ids = selectAry.map( item => item.nid);
    console.log(ids);
    axios.post("/news/delMult", ids).then(res=>{
        if(res==0){
            ElMessage({
                message:"批量删除成功!",
                type:"success",//消息窗口中的样式类型
                duration:2000,//消息窗口关闭后的回调函数
            })
            init();
        }
    })
}

//钩子函数，页面加载完后自动调用
onMounted(() => {
    init()
})
</script>

<template>

    <p>
        <el-button @click="data.showAddDialog = true" type="primary">增加</el-button>
        <el-button @click="getChecked" type="primary">批量删除</el-button>
    </p>

    <el-table ref="tableRef" :data="data.tableData" border style="width: 100%;" display:flex>
        <el-table-column type="selection" width="50" fixed="left"></el-table-column>
        <el-table-column width="100" label="新闻编号" prop="nid"></el-table-column>
        <el-table-column width="100" label="新闻标题" prop="title"></el-table-column>
        <el-table-column width="100" label="新闻内容" prop="content"></el-table-column>
        <el-table-column width="100" label="新闻作者" prop="author"></el-table-column>

        <el-table-column width="150" label="操作">
            <template #default="scope">
                <el-button @click="del(scope.row.nid)" type="danger" size="small" circle icon="delete"></el-button>
                <el-button @click="edit(scope.row)" type="primary" size="small" circle icon="edit"></el-button>
            </template>
        </el-table-column>
    </el-table>

<!-- 
    background:按钮背景颜色
    layout:布局,
    :total:指定总记录数的变量
    :page-size:指定每页显示的记录数
    @current-change:当前页码改变后的回调函数
    @current-page:当前页码
-->
    <el-pagination background layout="total,prev,pager,next,jumper" :total="data.total" :page-size="data.limit" @current-page="data.page" @current-change="changePage"></el-pagination>

    <el-dialog title="新增新闻" v-model="data.showAddDialog" style="width:300px;height:350px">
        <el-form style="width: 100%;" label-width="80">
            <el-form-item label="新闻标题">
                <el-input placeholder="请输入新闻标题" v-model="addForm.title"></el-input>
            </el-form-item>
            <el-form-item label="新闻内容">
                <el-input placeholder="请输入新闻内容" v-model="addForm.content"></el-input>
            </el-form-item>
            <el-form-item label="新闻作者">
                <el-input placeholder="请输入新闻作者" v-model="addForm.author"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="doAdd">确认</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog title="修改新闻" v-model="data.showEditDialog" style="width:300px;height:350px">
        <el-form style="width: 100%;" label-width="80">
            <el-form-item label="新闻编号">
                <el-input placeholder="请输入新闻编号" v-model="editForm.nid"></el-input>
            </el-form-item>
            <el-form-item label="新闻标题">
                <el-input placeholder="请输入新闻标题" v-model="editForm.title"></el-input>
            </el-form-item>
            <el-form-item label="新闻内容">
                <el-input placeholder="请输入新闻内容" v-model="editForm.content"></el-input>
            </el-form-item>
            <el-form-item label="新闻作者">
                <el-input placeholder="请输入新闻作者" v-model="editForm.author"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="doEdit">确认</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>

<style scoped></style>